<template>
  <div class="home">
    <div class="home-container">
      <div class="home-main">
        <div class="hero-section">
          <h2>{{ t('home.welcome') }}</h2>
          <p>{{ t('home.description') }}</p>
          <div class="cta-buttons">
            <el-button type="primary" size="large" @click="$router.push('/exchange')">
              {{ t('home.startExchange') }}
            </el-button>
            <el-button size="large" @click="$router.push('/login')">
              {{ t('home.loginAsMerchant') }}
            </el-button>
          </div>
        </div>
        
        <div class="features-section">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="feature-card">
                <div class="feature-icon">
                  <el-icon><Goods /></el-icon>
                </div>
                <h3>{{ t('home.feature1.title') }}</h3>
                <p>{{ t('home.feature1.description') }}</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="feature-card">
                <div class="feature-icon">
                  <el-icon><Ticket /></el-icon>
                </div>
                <h3>{{ t('home.feature2.title') }}</h3>
                <p>{{ t('home.feature2.description') }}</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="feature-card">
                <div class="feature-icon">
                  <el-icon><DataLine /></el-icon>
                </div>
                <h3>{{ t('home.feature3.title') }}</h3>
                <p>{{ t('home.feature3.description') }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
import { Goods, Ticket, DataLine } from '@element-plus/icons-vue'

export default {
  name: 'HomePage',
  components: {
    Goods,
    Ticket,
    DataLine
  },
  setup() {
    const { t } = useI18n()
    
    return {
      t
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
}

.home-container {
}

.home-main {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
}

.hero-section {
  text-align: center;
  padding: 100px 20px;
}

.hero-section h2 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero-section p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.features-section {
  padding: 80px 20px;
  background-color: #fff;
  color: #333;
}

.feature-card {
  text-align: center;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature-icon {
  font-size: 2rem;
  color: #409EFF;
  margin-bottom: 20px;
}

.feature-card h3 {
  margin-bottom: 15px;
  color: #303133;
}

.feature-card p {
  color: #606266;
  line-height: 1.6;
}
</style>